<template>
  <div
    class="work_area"
    ref="svgArea"
    @dragover.prevent
    :id='firstFlag?"workArea":""'
    @drop.prevent.stop="onAddNodeModel"
    :style="{width:'100%',height:firstFlag?'100%':'auto',overflow:firstFlag?'auto':'hidden'}"
  >
  </div>
</template>

<script>
export default {
  name: "workArea",
  props:{
    firstFlag: {
      type: Boolean,
      default() {
        return false
      }
    }, // 是不是首个画布
    height: {
      type: [String, Number],
      default() {
        return '100%'
      }
    }, // 高
    width: {
      type: [String, Number],
      default() {
        return '100%'
      }
    }, // 宽
  },
  methods: {
    onAddNodeModel(event,MVnode){
      console.log(event);
      console.log(MVnode);
      let node = event.dataTransfer && event.dataTransfer.getData('nodemodel')
      if (node){
        const nodeObj =JSON.parse(node)
        console.log(nodeObj);
      }
    }
  }
}
</script>

<style scoped>

</style>
